<template>
    <div class="cl6">
        <div class="iHead1">人民调解·矛盾纠纷</div>
        <div class="main">
            <div class="md">
                <div class="md-i">
                    <img src="@/assets/Group1321314845@2x.png" alt="">
                    <p>排查:</p>
                    <b>{{ allInfo.v1 }} </b>
                    <p>起</p>
                </div>
                <div class="md-i">
                    <img src="@/assets/Group1321314846@2x.png" alt="">
                    <p>化解:</p>
                    <b>{{ allInfo.v2 }}</b>
                    <p>起</p>
                </div>
                <!-- <div class="md-i">
                    <img src="@/assets/Group1321314845@2x.png" alt="">
                    <p>人民调解:</p>
                    <b>{{ allInfo.v3 }} </b>
                    <p>起</p>
                </div> -->
            </div>
            <div id="cm1View" ref="cm1View"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['infoData', 'posItem', 'yearItem'],
    data() {
        return {
            cm1View: null,
            allInfo: {
                v1: '',
                v2: '',
                v3: '',
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.cm1View = this.$echarts.init(this.$refs.cm1View);
            this.chartInit();
        });
    },
    watch: {
        posItem: function (infoData) {
            this.chartInit();
        },
        yearItem: function (infoData) {
            this.chartInit();
        },
    },
    methods: {
        chartInit() {
            let _data = [];
            this.infoData[12].map((i, o) => {
                if (i[0] == this.posItem) {
                    i[this.yearItem].split(',').map((n, m) => {
                        if (n.split(':')[0] == '化解') {
                            this.allInfo.v2 = n.split(':')[1]
                        } else if (n.split(':')[0] == '排查') {
                            this.allInfo.v1 = n.split(':')[1]
                        } else if (n.split(':')[0] == '人民调解') {
                            this.allInfo.v3 = n.split(':')[1]
                        } else {
                            _data.push({
                                name: n.split(':')[0],
                                value: n.split(':')[1]
                            })
                        }
                    })
                }
            })

            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 0,
                    itemWidth: 20,
                    itemHeight: 10,
                    itemGap: 6,
                    icon: 'circle',
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                    },
                    pageIconColor: '#fff',
                    pageIconInactiveColor: '#888',
                    bottom: 10,
                    pageTextStyle: {
                        color: '#fff',
                        fontSize: 10,
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['20%', '70%'],
                        avoidLabelOverlap: false,
                        center: ['30%', '55%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: _data
                    }
                ]
            };

            this.cm1View.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.cl6 {
    width: 620px;
    height: 180px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 620px;
        height: 180px;
        z-index: 1;
        background-image: url('../../assets/denglukuang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: .4;
    }

    .main {
        position: relative;
        z-index: 2;
        width: 620px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        #cm1View {
            margin-top: -30px;
            width: 360px;
            height: 180px;
        }

        .md {
            margin-top: -20px;

            .md-i {
                position: relative;
                height: 44px;
                display: flex;
                align-items: flex-end;
                font-family: 'PMZD';
                text-shadow: 0 0 12px #000;
                width: 214px;
                justify-content: center;

                p {
                    font-size: 22px;
                    position: relative;
                    z-index: 5;
                    top: -7px;
                }

                b {
                    position: relative;
                    z-index: 5;
                    font-size: 28px;
                    letter-spacing: 3px;
                    display: inline-block;
                    color: #82fff9;
                    top: -5px;
                    margin: 0 10px;
                }

                img {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    z-index: 4;
                }
            }

            .md-i:nth-of-type(2) {
                margin: 10px 0;
            }
        }
    }
}
</style>